<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { ElTabs, ElTabPane, ElMessage } from 'element-plus';
import { usePromptStore } from '../../stores/promptStore';

// 导入组件
import PromptGenerator from '../../components/PromptGenerator.vue';
import GroupManager from '../../components/GroupManager.vue';
import SettingsPanel from '../../components/SettingsPanel.vue';

const activeTab = ref('generation');
const promptStore = usePromptStore();

onMounted(async () => {
  await promptStore.loadFromStorage();
});
</script>

<template>
  <div class="app-container">
    <main class="app-main">
      <ElTabs v-model="activeTab" type="card" class="main-tabs">
        <ElTabPane label="提示词生成" name="generation">
          <PromptGenerator />
        </ElTabPane>
        
        <ElTabPane label="要素组管理" name="management">
          <GroupManager />
        </ElTabPane>
        
        <ElTabPane label="设置" name="settings">
          <SettingsPanel />
        </ElTabPane>
      </ElTabs>
    </main>
  </div>
</template>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1;
  overflow: hidden;
}

.main-tabs {
  height: 100%;
}

.main-tabs :deep(.el-tabs__content) {
  height: calc(100% - 40px);
  overflow: auto;
}

.main-tabs :deep(.el-tab-pane) {
  height: 100%;
}
</style>
